<!--  -->
<template>
  <div class='task'>
    <!--        头部-->
    <head-top></head-top>
    <div style="width: 100%;height: 50px;"></div>
    <div class="vantTabs">
      <van-tabs sticky title-active-color="#fbef1a" @click="clickTitle">
        <van-tab v-for="(item,index) in taskList" :key="index">
          <template #title>{{item.title}}</template>
          <div class="search">
            <div class="searchpd">
              <input placeholder="商家账号/商家名称/商家微信/商家qq" v-model="page.query "/>
              <p @click="query">查询</p>
            </div>
          </div>
          <div style="width: 100%;height: 100px;"></div>
          <div class="taskcon">
            <div class="taskconmsg" >
              <div class="items" v-for="(item,index) in list" :key="index" >
                <div>{{item.shopName}}</div>
                <ul>
                  <li>
                    <div>添加时间</div>
                    <div class="reslut">{{item.createTime}}</div>
                  </li>
                  <li>
                    <div>对接商务</div>
                    <div class="reslut">{{item.nickName}}</div>
                  </li>
                  <li >
                    <div>状态</div>
                    <div class="reslut">{{ item.shopStatus }}</div>
                  </li>
                  <li v-if="currentTag == 1">
                    <div>拉黑理由</div>
                    <div class="reslut">{{ item.blockReason }}</div>
                  </li>
                </ul>
<!--                <router-link tag="div" :to="{path:'/createBusiness',query:{id:item.id}}" class="editor">-->
<!--                  编辑-->
<!--                </router-link>-->
              </div>
            </div>
            </div>
        </van-tab>
      </van-tabs>
    </div>
    <div style="width: 100%;height: 60px;background: #f8f8f8;"></div>
<!--    <div class="resetBut">-->
<!--      <router-link tag="div" to="/createBusiness" class="button">新增</router-link>-->
<!--    </div>-->
  </div>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from ‘《组件路径》‘;
  import headTop from "../../components/base/headTop.vue"
  import shopApi from "@/api/shop"
  import {Toast} from "vant";
  export default {
//import引入的组件需要注入到对象中才能使用
    components: {
      headTop
    },
    data() {

      return {
        storename:'皮卡卡卡卡卡丘店',
        taskList:[
          {
            title:'商家查询',
          },
          {
            title:'拉黑记录',
          }
        ],
        page:{
          pageNo:1,
          pageSize:20,
          query:'',
          shopStatus:''
        },
        list: [],
        currentTag:0,
      };
    },
//监听属性 类似于data概念
    computed: {

    },
//监控data中的数据变化
    watch: {},

    methods: {
      clickTitle(name){
        this.currentTag = name
        this.page.query = ''
        this.list = []
        if (this.currentTag == 1) {
          this.page.shopStatus = '3'
        }


      },
      query(){
        shopApi.checkList(this.page).then(res=>{
          this.list = res.data.records
          if (this.list.length == 0) {
            Toast('没有此商家')
          }

        })
      }
    },

    created() {
    },

    mounted() {

    },
    beforeCreate() {
    },
    beforeMount() {
    },
    beforeUpdate() {
    },
    updated() {
    },
    beforeDestroy() {
    },
    destroyed() {
    },
    activated() {
    }, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style lang="less" scoped>
  .task{
    width: 100%;
    min-height: 100%;
    background: #f8f8f8;
  }
  .resetTitle {
    width: 100%;
    padding: 15px 0;
    position: fixed;
    top: 0;
    left: 0;
    background: #f8f8f8;
    z-index: 10001;

    .imgs {
      position: absolute;
      left: 10px;
      top: 13px;

      span {
        font-size: 25px;
      }
    }

    .resetText {
      width: 100%;
      text-align: center;
      font-weight: bold;
      font-size: 16px;
    }
  }
  .vantTabs{
    width: 100%;
    /deep/.van-tabs__line{
      width: 50%;
      background: #f8f5be;
    }
    /deep/.van-sticky{
      width: 100%;
      position: fixed;
      top: 50px;
      left: 0;
    }
    .search{
      width: 100%;
      background: white;
      position: fixed;
      top: 94px;
      left: 0;
      .searchpd{
        padding: 10px;
        display: flex;
        align-items: center;
        input{
          flex: 1;
          text-indent: 20px;
          background: #f4f4f4;
          border-radius: 5px;
          height: 30px;
          line-height: 30px;
        }
      }
    }
    .taskcon{
      background: #ffffff;
      .taskconmsg{
        .items {
          padding: 10px;

          ul {
            width: 100%;

            li {
              display: flex;
              justify-content: space-between;
              padding: 5px 0;
              align-items: center;
              font-size: 14px;
              color: #727271;

              .reslut {
                color: black;
              }
            }
          }

          .editor {
            width: 98%;
            padding: 5px 0;
            border-radius: 20px;
            color: white;
            text-align: center;
            background: #f8f5be;
            margin: 0 auto;
          }
        }
        .repeatflex{
          display: flex;
          justify-content: space-between;
          margin-bottom: 5px;
          div{
            width: 49.8%;
            text-align: center;
            padding: 5px 0;
          }
          .repeat{
            background: #abdbe7;
          }
          .colse{
            background: #f8f5be;
          }
        }
      }
    }
  }
  .resetBut {
    width: 100%;
    background: white;
    position: fixed;
    left: 0;
    bottom: 0;
    padding-bottom: 10px;

    .button {
      color: white;
      margin: 0 auto;
      width: 90%;
      border-radius: 30px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background: #f8f5be;
    }

  }
</style>
